// 给所有p3需要用到的函数进行包装 避免一开始没有找到dom元素就执行 导致js无法运行
function llk() {
    const allLi = document.getElementsByClassName('all')[0].children;
    const count = { upKard: [], upNum: 0 };
    // 循环绑定点击事件到li节点中
    for (let x = 0; x < allLi.length; x++) {
        allLi[x].onclick = front;
    }
    function front() {
        // 清空点击事件
        this.onclick = "";
        // 添加翻牌动画
        this.children[0].className = "front back";
        this.children[1].className = "back up";
        // push进数组里
        count.upKard.push(this.children[1].children[0]);
        // 当数组长度为2是判断两张牌是否一致
        if (count.upKard.length === 2) {
            if (count.upKard[0].currentSrc === count.upKard[1].currentSrc) {
                // 一致时添加成功动画
                count.upKard[0].offsetParent.className = "back up sf";
                count.upKard[1].offsetParent.className = "back up sf";
                // 清空数组 增加计数器并显示
                count.upKard = [];
                count.upNum++;
                // 速通 对一次就成功 用于测试成功页面显示
                // count.upNum = 6;
                document.getElementById("upNum").innerHTML = count.upNum;
                // 当计数器到6时 设置定时器显示成功页面 
                // 并且避免同步代码的优先级原因 最后一张卡片还没触发动画就成功了
                if (count.upNum === 6) {
                    setTimeout(() => {
                        document.getElementsByClassName("p3_success")[0].style.display = "block";
                        // Reset();

                    }, 1100);
                }
            } else {
                // 当两张牌不一致时 设置延时 并且重新给每个li添加上点击事件
                setTimeout(() => {
                    for (let x = 0; x < count.upKard.length; x++) {
                        // 通过dom树寻找上级
                        count.upKard[x].offsetParent.previousElementSibling.parentElement.onclick = front;
                        count.upKard[x].offsetParent.previousElementSibling.parentElement.children[0].className = "front";
                        count.upKard[x].offsetParent.className = "back";
                    }
                    // 清空数组
                    count.upKard = [];
                }, 700);
            }
        }
    }

    // 创建一个生成器
    function* shuffleArr() {
        getRandom = (min, max) => {
            // 获取随机数
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        shuffle = (arr) => {
            // 利用array.slice()将原数组复制到新的空数组中
            let newArr = arr.slice();
            for (let i = 0; i < newArr.length; i++) {
                // 获取到随机数
                let j = getRandom(0, i);
                // 重新赋值
                [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
            }
            return newArr;
        }
        const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
        // 传入需要打乱的数组 断点返回异步洗好的函数
        yield shuffle(arr);
    }

    // 开局自动插入图片
    // 创建迭代器
    const startShuffle = shuffleArr();
    (start = (shuffle) => {
        // 获取到洗好后的顺序数组
        const cardNum = shuffle.next().value;
        // 图片路径数组
        const cardImg = ['img/p3/bp.png', 'img/p3/ds.png', 'img/p3/mc.png', 'img/p3/sg.png', 'img/p3/wr.png', 'img/p3/zm.png', 'img/p3/bp.png', 'img/p3/ds.png', 'img/p3/mc.png', 'img/p3/sg.png', 'img/p3/wr.png', 'img/p3/zm.png'];
        // 循环给li添加点击事件 给li子元素添加对应的className 更改img的src属性 清空数组与计数器
        for (let x = 0; x < cardNum.length; x++) {
            allLi[x].onclick = front;
            allLi[x].children[0].className = "front";
            allLi[x].children[1].className = "back";
            allLi[x].children[1].innerHTML = `<img src=${cardImg[cardNum[x]]}>`;
            count.upKard = [];
            count.upNum = 0;
            document.getElementById("upNum").innerHTML = count.upNum;
            document.getElementsByClassName("p3_success")[0].style.display = "none";
        }
    })(startShuffle);
    // 重置按钮
    document.getElementsByClassName("p3_top_right")[0].onclick = () => {
        const resetShuffle = shuffleArr();
        start(resetShuffle);
    };

}
// 利用字符串切片与递归定时器来做出打字机动画效果
//此函数已经转移至js.js

